<template>
	<div class="c-image" @dblclick="showImgset">
		<swiper :options="swiperOption" class="swiper-no-swiping">
			<swiper-slide v-for="(item,index) in cm.props.src" :key="index">
				<img :src="item" class="ani" :swiper-animate-effect="cm.props.animate" :swiper-animate-duration="cm.props.animateDuration"
				 :swiper-animate-delay="cm.props.animateDelay" />
			</swiper-slide>
		</swiper>
		<!-- swiper-animate-effect: 切换效果，例如 fadeInUp
		swiper-animate-duration：可选，动画持续时间（单位秒），例如 0.5s
		swiper-animate-delay：可选，动画延迟时间（单位秒），例如 0.3s -->
	</div>
</template>

<script>
	// 防抖函数
	import {
		debounce
	} from '../utils.js'

	import {
		swiper,
		swiperSlide
	} from 'vue-awesome-swiper'
	import * as swiperAni from "@/assets/js/swiper.animate.min.js"
	export default {
		name: 'BaseImgset',
		data() {
			return {
				swiperOption: {
					width: 200,
					loop: false,
					speed: 1000,
					autoplay: {
						delay: 500,
						disableOnInteraction: false,
					},
					grabCursor: true,
					initialSlide: 0,
					stopOnLastSlide: false,
					effect: "fade",
					watchOverflow: true,
					on: {
						init: function() {
							swiperAni.swiperAnimateCache(this);
							swiperAni.swiperAnimate(this);
						},
						slideChange: function() {
							swiperAni.swiperAnimate(this);
						}
					}
				},
				property_value: this.$store.getters.getCompConfigByCompid(this.compid),
				old_property_val: null
			}
		},
		props: {
			compid: {
				type: [String, Number],
				required: true
			}
		},
		computed: {
			cm() {
				return this.$store.getters.getCompConfigByCompid(this.compid)
			}
		},
		watch: {
			property_value: {
				handler(new_val, old_val) {
					this.change_component({
						new_val,
						old_val
					});
				},
				deep: true,
				immediate: true
			}
		},
		methods: {
			showImgset() {
				if (!this.cm.isProview) {
					this.$store.commit('SET_IMAGESETS', this.cm.props.src)
					this.$store.commit('IMAGE_LIBRAY', {
						status: false,
						cropperImg: true,
						type: 'imgset',
						callback: (result) => {
							if (result && result.imgs.length) {
								var url = []
								for (let item in result.imgs) {
									url.push(result.imgs[item].value)
								}
								const compid = this.compid
								this.$store.commit('EDIT_IMGSET_URL', {
									compid: this.compid,
									imgurls: url,
									animate: result.animation,
									animateDuration: result.animateDuration,
									animateDelay: result.animateDelay
								})
							}
						}
					})
				}
			},
			change_component: debounce(function(
				params
			) {
				const revoke_state = this.$store.getters.revoke_state
				if (this.old_property_val) {
					// 表示是撤销状态的值的更新
					if (revoke_state) {
						this.$store.commit('REVOKE_STATE', false)
					} else {
						this.$store.commit('ADD_REVOKE_CONTENT', this.old_property_val)
					}
				}
				this.old_property_val = JSON.parse(JSON.stringify(params.new_val))
			}, 300)
		},
		components: {
			swiper,
			swiperSlide
		}
	}
</script>
<style lang="scss" scoped>
	.swiper-slide img {
		width: 100%;
		height: 100%;
	}
</style>
